fashion-ssr-vue3/pages/categories/[slug].vue

<script lang='ts' setup>
import { useCommonStore } from '@/stores/modules/common'
import { Condition } from '@/enums/const-enums'

const commonStore = useCommonStore()
const list = [
  {
    id: '1930872642297643010',
    title: 'Stationary & Office Supplies',
    subhead: 'Discover bestsellers and fresh arrivals tailored to your niche.',
    coverImg: 'https://picsum.photos/560/310',
    coverAlt: 'https://picsum.photos/560/310',
    pdf: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
    viewPdf: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
    // pdfUrl: 'https://static.ejetselection.com/temp/导入模板2222_1736660213488.xlsx',
    downloadCondition: Condition.DOWNLOAD, // 下载条件 1是登录后下载 2是登录后申请下载
    blogSlug: 'stationary-office-supplies',
  },
  {
    id: '1934486796128428033',
    billNo: 'ML000004',
    title: '目录册标题',
    subhead: '副标题',
    category: '1933455277679104002',
    downloadCondition: '1',
    trend: '1',
    state: '1',
    coverImg: 'https://static.ejetselection.com/temp/微信图片_20250530110533_1750052537617.jpg',
    coverAlt: 'alt',
    viewPdf: 'https://static.ejetselection.com/temp/新建DOCX文档_1750052562044.pdf',
    pdf: 'https://static.ejetselection.com/temp/新建DOCX文档_1750052566275.pdf',
    createBy: '王亮',
    createTime: '2025-06-16 13:42:48',
    updateBy: '王亮',
    updateTime: '2025-06-16 13:43:00',
    blogSlug: null,
    category_dictText: 'TREND TOYS',
    category_dictColor: 'null',
  },
]
const { openLoginAndDownloadModal } = useLoginAndDownLoadModal()

async function clickLoginAndDownload(item: any) {
  try {
    commonStore.setDownloadCatalog(item)
    const { status } = await openLoginAndDownloadModal()
    if (status)
      location.reload()
  }
  catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <div>
    <div class=" bg-#0F0820">
      <div class="header w-1200-auto text-center flex items-center justify-center h-600px  bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/420/420')">
        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
          STATIONARY & OFFICE SUPPLIES
        </h1>
      </div>
    </div>
    <div class="py-120px w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
        Our Latest Product <span class="custom-title-bg04">Catalogs</span>
      </h2>
      <div class="text-#999 text-22px mb-40px">
        Discover bestsellers and fresh arrivals tailored to your niche.
      </div>
      <div class="grid grid-cols-2 gap-64px text-left">
        <div v-for="item in list" :key="item.id">
          <business-categories-comp-item :item="item" @select="clickLoginAndDownload" />
        </div>
      </div>
    </div>
    <common-block-catalogs />
    <common-block-blog class="!pb-0" />
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
.header{
  background-position: 50% 75%;
}
</style>